<template>
	<view class="page__content">
		<up-navbar :fixed="false" title="编辑用料" :autoBack="true" :safeAreaInsetTop="true" leftIconColor="#fff">
		</up-navbar>

		<view class="page__content__main">
			<up-form labelPosition="left" :model="formData" ref="uFormRef" :rules="rules">
				<up-form-item labelWidth="120" label="产品编号" prop="ProductCode" borderBottom leftIcon="order" required
					:leftIconStyle="{'font-size':'20px'}">
					<view class="iptView" @click="openBaseScreen('产品','radio')">
						<up-input v-model="formData.ProductCode" readonly border="none"
							suffixIcon="arrow-right"></up-input>
					</view>
				</up-form-item>

				<up-form-item labelWidth="120" label="产品名称" prop="ProductName" borderBottom leftIcon="file-text"
					:leftIconStyle="{'font-size':'20px'}">
					<up-input v-model="formData.ProductName" readonly border="none"></up-input>
				</up-form-item>

				<up-form-item labelWidth="120" label="产品规格" prop="ProductSpec" borderBottom leftIcon="file-text"
					:leftIconStyle="{'font-size':'20px'}">
					<up-input v-model="formData.ProductSpec" readonly border="none"></up-input>
				</up-form-item>

				<up-form-item labelWidth="120" label="父件基数" prop="ParentNum" borderBottom leftIcon="coupon"
					:leftIconStyle="{'font-size':'20px'}" required style="margin-top: 10px;">
					<up-input v-model="formData.ParentNum" type="number" placeholder="请输入" suffixIcon="edit-pen-fill"
						border="none"></up-input>
				</up-form-item>

				<up-form-item labelWidth="120" label="子件用量" prop="SunNume" borderBottom leftIcon="coupon"
					:leftIconStyle="{'font-size':'20px'}" required>
					<up-input v-model="formData.SunNume" type="number" placeholder="请输入" suffixIcon="edit-pen-fill"
						border="none"></up-input>
				</up-form-item>

				<up-form-item labelWidth="120" label="损耗率" prop="LossRatio" borderBottom leftIcon="coupon"
					:leftIconStyle="{'font-size':'20px'}">
					<up-input v-model="formData.LossRatio" type="number" placeholder="请输入" suffixIcon="edit-pen-fill"
						border="none"></up-input>
				</up-form-item>

				<up-form-item labelWidth="120" label="用量单位" prop="UnitName" leftIcon="file-text" required
					@click="openBaseScreen('用量单位','radio')" :leftIconStyle="{'font-size':'20px'}">
					<up-input v-model="formData.UnitName" readonly placeholder="请选择" suffixIcon="arrow-right"
						border="none"></up-input>
				</up-form-item>
			</up-form>


		</view>


		<view class="page__content__bottom" :style="uni.$utils.disposeSafeBottomFun()">

			<button class="content_bottom_primary_plainBtn page__content__bottom__btn">取消</button>
			<button class="content_bottom_primary_Btn page__content__bottom__btn" @click="submitBtn">保存</button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive, onMounted, computed } from 'vue'
	import { onLoad, onShow, onUnload } from '@dcloudio/uni-app'
	import useRequestQueue from '@/uni_modules/mc-ui/libs/http/UniversalRequestQueue';
	const { request, requestByUrl, PromiseRequestByUrl, onAllComplete, onError } = useRequestQueue();
	import { useMainStore, useUserStore, usePermissionStore, useTicketStore } from '@/store';
	const mainStore = useMainStore();
	const userStore = useUserStore();
	const permissionStore = usePermissionStore();
	const ticketStore = useTicketStore();

	let formData = reactive<any>({
		ProductID: '',
		ProductCode: '',
		ProductName: '',
		ProductSpec: '',
		ParentNum: '', // 父件基数
		SunNume: '', // 子件用量
		LossRatio: '', // 损耗率
		UnitName: '', // 单位
		UnitID: '', // 单位
	});

	let rules = {
		'ProductCode': {
			type: 'string',
			required: true,
			message: '产品不能为空',
			trigger: ['change']
		},
		'ParentNum': {
			type: 'number',
			required: true,
			message: '父件基数不能为空',
			trigger: ['change']
		},
		'SunNume': {
			type: 'number',
			required: true,
			message: '子件用量不能为空',
			trigger: ['change']
		},
		'UnitName': {
			type: 'string',
			required: true,
			message: '用量单位不能为空',
			trigger: ['change']
		}
	};

	Object.assign(formData, mainStore.BaseScreenParm.data);
	let listenName = mainStore.BaseScreenParm.listenName;

	let routes = getCurrentPages(); //当前页面栈
	const baseScreenListenName = computed(() => {
		return 'materialsCellInfo_choice_' + routes.length
	})
	function openBaseScreen(str ?: string, type ?: any) {
		let multiple = type == 'check';
		switch (str) {
			case "产品":
				mainStore.openBaseScreen({
					allowClear: false, // 清除按钮
					cmd: 'XGD_Product', // 接口名
					titleName: str,
					listeningName: baseScreenListenName.value, // 监听器
					multiple: multiple, // 是否开启多选
					serverSearch: { // 查询项
						format: { // 数据映射
							displayValue: "ProductInfo", // 显示值
							hiddenValue: "ProductID", // 隐藏值
							pageIndex: "PageIndex", // 分页状态页码字段
							pageSize: "PageSize", // 分页状态每页数量字段
						},
						isPaging: true, //是否分页
						searchKey: 'SearchKey', //搜索关键词，应包含在param中
						subText: [{
							label: "描述", // label文本
							labelKey: "desc", // 显示label文本后文字的key
						}],
						choiceData: formData.ProductID, // 选中数据
						choiceDataKey: "ProductID", // 选中数据的key
					},
					param: { // 传递参数
						SearchKey: '',
						PageIndex: 1,
						PageSize: 30
					}
				});
				break;

			case "用量单位":
				mainStore.openBaseScreen({
					allowClear: false, // 清除按钮
					cmd: 'XGD_Units', // 接口名
					titleName: str,
					listeningName: baseScreenListenName.value, // 监听器
					multiple: multiple, // 是否开启多选
					serverSearch: { // 查询项
						format: { // 数据映射
							displayValue: "UnitName", // 显示值
							hiddenValue: "UnitID", // 隐藏值
							pageIndex: "PageIndex", // 分页状态页码字段
							pageSize: "PageSize", // 分页状态每页数量字段
						},
						isPaging: true, //是否分页
						searchKey: 'SearchKey', //搜索关键词，应包含在param中
						choiceData: formData.UnitID, // 选中数据
						choiceDataKey: "UnitID", // 选中数据的key
					},
					param: { // 传递参数
						SearchKey: '',
						PageIndex: 1,
						PageSize: 30
					}
				});
				break;
			default:
				break;
		}

	};


	interface UFormsInstance {
		validate : (callback ?: (isValid : boolean) => void) => Promise<boolean>
		resetFields : () => void
		// 可以根据需要添加其他方法
	}
	const uFormRef = ref<UFormsInstance | any>(null);

	function submitBtn() {
		uFormRef.value.validate().then((ret : any) => {
			uni.$utils.msg("校验通过！")
			uni.$emit(listenName, {
				titleName: '编辑用料',
				msg: '',
				data: formData
			});

			uni.navigateBack()
		}).catch((errors : any) => {
			if (Array.isArray(errors)) {
				uni.$utils.msg("请完善表单！")
			}
		});
	}

	onMounted(() => {
		uni.$on(baseScreenListenName.value, (ret) => {
			console.log(ret);
			switch (ret.titleName) {
				case "产品":
					if (uni.$utils.isEmpty(ret.data.ProductSpec)) {
						ret.data.ProductSpec = '-';
					}
					Object.assign(formData, ret.data);
					break;
				case "用量单位":
					Object.assign(formData, ret.data);
					break;
				default:
					break;
			}
		})
	})

	onUnload(() => {
		uni.$off(baseScreenListenName.value);
	})
</script>

<style lang="scss">
	.page__content {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f5f5f5;

		.page__content__main {
			flex: 1;
			overflow: auto;
			// padding: 10px;

			// 表单1
			.up-form {
				// padding: 0px 10px;

				.up-form-item {
					background-color: #fff;
					padding: 0 16px;
				}
			}
		}

		.BottomBox {
			height: 70px;
			line-height: 70px;
			padding: 6px 15px;
			border-top: 1px solid #efefef;
			display: flex;
			align-items: center;
			background-color: #fff;

			.SaveBtn {
				width: 40%;
				background-color: #fff;
				color: #51d0d0;
				border: 1px solid #51d0d0;
				border-radius: 12px;
			}

			.SubBtn {
				width: 40%;
				background-color: #51d0d0;
				color: #fff;
				border-radius: 12px;
			}
		}
	}
</style>